<div class="bg-inverse product_tab_outer">
  <div class="main-product-tab">
    <div class="container">
      <div class="content-inner category-tab d-flex">
        <ul class="nav tab-list mx-auto text-nowrap flex-nowrap as-tabs" data-sectionlist="{{ sectionsList }}">
          {%- for block in section.blocks -%}
            {% if block.type == 'tab' %}
            <li class="nav-item d-flex" role="presentation">
              <a class="as-tab-item tab-item py-3 {% if forloop.first %}active ms-0{% elsif forloop.last %}me-0{% endif %} cursor-pointer {{ text_color }}" id="cate-tab-{{ forloop.index }}" data-target="{{ block.settings.section_container }}">
                {{ block.settings.tab_label }}
              </a>
            </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>
<style>
    @media(max-width:768px){
        .kik-product-tab-categories .main-product-tab .category-tab {
            width: 100%;
            overflow-x: auto;
        }   
        .kik-product-tab-categories .main-product-tab .container{
          padding-left: 16px;
          padding-right: 16px;
        }
        .kik-product-tab-categories .main-product-tab .container .category-tab .tab-list .nav-item a{
            margin-right:6px;
            margin-left:6px;
        }
    }
</style>
{% schema %}
{
  "name": "product Category Tab",
  "class": "kik-product-tab-categories",
  "tag": "section",
  "settings": [
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "label": "Tab label",
          "type": "text",
          "id": "tab_label",
          "default": "Tab"
        }, 
        {
          "type": "text",
          "id": "section_container",
          "label": "Section class",
          "info":"Enter section class need to scroll there"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "product Category Tab"
    }
  ]
}

{% endschema %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tabItems = document.querySelectorAll('.as-tab-item');
    const tabList = document.querySelector('.as-tabs');
    const sectionList = tabList.getAttribute('data-sectionlist');
    tabItems.forEach(tab => {
      tab.addEventListener('click', function(e) {
        e.preventDefault();
        tabItems.forEach(item => item.classList.remove('active'));
        this.classList.add('active');
        const targetId = this.getAttribute('data-target');
        let targetSection = null;
        targetSection = document.querySelector(`#${targetId}`);
        if (!targetSection) {
          const allSections = document.querySelectorAll('section');
          targetSection = Array.from(allSections).find(section => 
            section.id.toLowerCase() === targetId.toLowerCase() ||
            section.classList.contains(targetId.toLowerCase())
          );
        }
        if (!targetSection) {
          targetSection = document.querySelector(`.${targetId}`);
        }
        console.log('Target Section:', targetSection);
        if (targetSection) {
          targetSection.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        } else {
          console.warn(`Target section not found for: ${targetId}`);
        }
      });
    });
  });
</script>